<template>
  <div class="preview-container">
    <a-row type="flex" justify="center" v-if="template">
      <a-col :span="8" class="cover-img">
        <img :src="template.coverImg" :alt="template.title" id="logo-img" />
      </a-col>
      <a-col :span="8">
        <div class="content">
          <h2>{{ template.title }}</h2>
          <p>{{template.desc || '暂无描述'}}</p>
          <div class="author">
            <!-- <a-avatar :src="template.user.picture" v-if="template.user.picture"> -->
            <!-- </a-avatar> -->
           <a-avatar >
              <template v-slot:icon>
                <UserOutlined />
              </template>
            </a-avatar> 
            {{ template.author}}
          </div>
          <div class="bar-code-area">
            <span>扫一扫</span>
            <canvas id="barcode-container"></canvas>

          </div>
          <div class="content__operation">
            <router-link :to="`/editor/${template.id}`">
              <a-button type="primary">使用模板</a-button>
            </router-link>
            <a-button @click="download" >下载海报模板</a-button>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script lang="ts" setup>
import { GlobalDataProps } from "@/store";
import { TemplateProps } from "@/store/template";
import { Row as aRow, 
  Col as aCol, Button as aButton,
  Avatar as aAvatar 
} from "ant-design-vue";
import {  UserOutlined } from "@ant-design/icons-vue";
import { computed, onMounted,nextTick } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import QRCode from 'qrcode'
import { baseH5URL } from "@/main";
import axios from "axios";
const store = useStore<GlobalDataProps>();
const route = useRoute();
const currentId = route.params.id as string;
const channelURL = computed(() => `${baseH5URL}/p/${currentId}`)



const template = computed<TemplateProps | null>(() => {
  return store.getters.getTemplateById(parseInt(currentId));
});

async function generateQRCode(id: string, url: string) {
    const canvas = document.getElementById(id) as HTMLCanvasElement
    console.log('canvas', id, canvas);
    if (!canvas) {
       await nextTick()
    }
    return QRCode.toCanvas(canvas, url, { width: 150, margin: 1,  errorCorrectionLevel: 'H'})
}

onMounted(async () => {
  await store.dispatch("fetchTemplateDetail", {urlParams: {id: currentId}});
  console.log('template', template.value)
  if (template.value) {
    generateQRCode('barcode-container', channelURL.value)
  }
});

const download = () =>{
  const image = document.getElementById('logo-img') as HTMLImageElement
  const link = document.createElement('a')
  link.download = 'test.png'
  link.rel = 'noopener'

  if (link.origin !== location.origin){
      axios.get(image.src, {responseType: 'blob'}).then(data => {
      link.href = window.URL.createObjectURL(data.data)
      setTimeout(()=>{
        link.dispatchEvent(new MouseEvent('click'))
      })
      setTimeout(() => {
        window.URL.revokeObjectURL(link.href)
      }, 10000)
    }).catch(err => {
      console.error(err)
      link.target = '_blank'
      link.href = image.src
      link.dispatchEvent(new MouseEvent('click'))
    })
  } else {
    link.href = image.src
    // 触发时间
    link.dispatchEvent(new MouseEvent('click'))
  }

  
}


</script>
<style scoped lang="css">
.cover-img {
  margin-right: 30px;
}
.cover-img img {
  width: 100%;
}
.preview-container {
  margin-top: 64px;
  padding: 0px 24px;
  min-height: 85vh;
  max-width: 1200px;
  margin: 0px auto;
  width: 100%;
  margin-top: 50px;
}
.preview-container img {
  overflow: clip;
  vertical-align: middle;
  border-style: none;
}
.author{
  padding: 10px 10px 20px 0px;
}


.bar-code-area{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.content__operation{
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}
</style>
